import 'package:flutter/material.dart';

class BasicWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration( // 设置装饰盒子
        image: DecorationImage(
          image: AssetImage('assets/images/3.jpg'), // 设置背景图片
          alignment: Alignment.topCenter, // 设置图像的位置
          repeat: ImageRepeat.repeat, // 设置图像的重复方式
          // fit: BoxFit.contain, // 设置图像的显示方式
          colorFilter: ColorFilter.mode( // 设置背景过滤效果
            Colors.indigoAccent[100].withOpacity(0.3), 
            BlendMode.hardLight, 
          ),
        ),
      ),
      // color: Colors.grey[100], // 设置容器的颜色
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center, // 设置主轴对齐方式
        children: <Widget> [ // 设置子组件
          Container(
            child: Icon(Icons.pool, size: 32.0, color: Colors.white), // 设置容器的内容
            // color: Color.fromRGBO(3, 54, 255, 1.0), // 设置容器的背景颜色
            padding: EdgeInsets.all(16.0), // 设置容器的内边距
            margin: EdgeInsets.all(16.0), // 设置容器的外边距
            width: 90.0, // 设置容器的宽度
            height: 90.0, // 设置容器的高度
            decoration: BoxDecoration( // 设置盒子的装饰
              color: Color.fromRGBO(3, 54, 255, 1.0), // 设置容器的背景颜色
              border: Border.all( // 设置所有边框的样式
                color: Colors.indigoAccent[100], // 设置边框颜色
                width: 3.0,
                style: BorderStyle.solid,
              ),
              // borderRadius: BorderRadius.circular(10.0), // 设置圆角边框，类型为圆形的盒子不能设置圆角效果，会报错
              boxShadow: [
                BoxShadow(
                  offset: Offset(0.0, 16.0), // 设置阴影的偏移量
                  color: Color.fromRGBO(16, 20, 188, 1.0), // 设置阴影的颜色，默认为黑色
                  blurRadius: 25.0, // 设置阴影的模糊程度
                  spreadRadius: -9.0, // 设置阴影的扩散程度，正数扩大阴影面积，负数缩小阴影面积
                )
                // BoxShadow(
                //   offset: Offset(6.0, 7.0), // 设置阴影的偏移量
                //   color: Color.fromRGBO(16, 20, 188, 1.0), // 设置阴影的颜色，默认为黑色
                //   blurRadius: 1.0, // 设置阴影的模糊程度
                //   spreadRadius: -1.0, // 设置阴影的扩散程度，正数扩大阴影面积，负数缩小阴影面积
                // )
              ], // 添加阴影效果
              shape: BoxShape.circle, // 改变装饰盒子的形状 BoxShape.rectangle 
              gradient: LinearGradient( // 设置线性渐变效果
                  colors: [
                    Color.fromRGBO(7, 102, 255, 1.0),
                    Color.fromRGBO(3, 28, 128, 1.0),
                  ], // 设置渐变的颜色
                  begin: Alignment.topCenter, // 设置渐变的开始位置
                  end: Alignment.bottomCenter, // 设置渐变的结束位置
              ),
              // gradient: RadialGradient( // 设置径向渐变效果
              //   colors: [
              //     Color.fromRGBO(7, 102, 255, 1.0),
              //     Color.fromRGBO(3, 28, 128, 1.0),
              //   ]
              // ), // 添加渐变效果
              // border: Border(
              //   top: BorderSide( // 设置上边框的样式
              //     color: Colors.indigoAccent[100], // 设置边框颜色
              //     width: 3.0, // 设置边框宽度
              //     style: BorderStyle.solid, // 设置边框样式
              //   ),
              //   bottom: BorderSide( // 设置上边框的样式
              //     color: Colors.indigoAccent[100], // 设置边框颜色
              //     width: 3.0, // 设置边框宽度
              //     style: BorderStyle.solid, // 设置边框样式
              //   ),
              //   left: BorderSide( // 设置上边框的样式
              //     color: Colors.indigoAccent[100], // 设置边框颜色
              //     width: 3.0, // 设置边框宽度
              //     style: BorderStyle.solid, // 设置边框样式
              //   ),
              //   right: BorderSide( // 设置上边框的样式
              //     color: Colors.indigoAccent[100], // 设置边框颜色
              //     width: 3.0, // 设置边框宽度
              //     style: BorderStyle.solid, // 设置边框样式
              //   ),
              // ), // 设置变量属性
            ),
          )
        ],
      ), // 添加横排布局容器
    );
  }
}

// 富文本部件样式
class RichTextDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return RichText(
        text: TextSpan(
          text: "Hello RichText",
          style: TextStyle(
            color: Colors.purple, // 设置文字的颜色
            fontSize: 34.0, // 设置文字的大小
            fontStyle: FontStyle.italic, // 设置文字的样式
            fontWeight: FontWeight.bold, // 设置文字的粗细
          ),
          children: [
            TextSpan(
              text: "www.flutter.cn",
              style: TextStyle(
                fontSize: 16.0,
                color: Colors.grey,
              ),
            ),
          ],
        ),
      );
  }
}

// 文字部件样式
class TextWidget extends StatelessWidget {
  
  // 定义变量 _ 开头表示私有变量
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0, // 设置文字的大小
  );

  final String _author = "李白";
  final String _title = "站起来";

  @override
  Widget build(BuildContext context) {
    return Text(
      "《$_title》--- $_author。 站起来，是一种超然的境界，凛然的气概，昂然的精神，嫣然的美丽。小草，从乱石堆的缝隙里，站成蓬勃的绿洲。礁石，在海浪的咬噬里，站成蓬勃的冷峻。奋斗途中的头破血流是生命一面猩红的旗帜。如果我们能捂紧重创的伤口，挺起胸膛，站直腰杆去对待任何事情，那么，又有什么困难不能克服呢？一个有勇气从灾难中站起来的民族，是不可小觑的。一个有决心从废墟上站起来的城市，是不可低估的。一个有志气从屈辱里站起来的人，是不可等闲的。诚然，并非每个人都能站成直插云霄的擎天柱；并非每个人都能站成叱咤万里的风雷。但你至少能站成一种正气，一线坚贞，一份坦荡。站出自己不羁的性格！", // 使用 $变量名 引用变量
      textAlign: TextAlign.center, // 设置文字的对齐方式
      style: _textStyle,
      maxLines: 5, // 设置显示的文字行数
      overflow: TextOverflow.ellipsis, // 设置溢出文字的样式
      // style: TextStyle(
      //   fontSize: 16.0, // 设置文字的大小
      // ), // 设置文字的样式
      );
  }
}